<! DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="height=device-height,width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
user-scalable=no, target-densitydpi=medium-dpi" />
<title>TokkTsat</title>
<!-- CSS -->
<link rel="stylesheet" href="http://64.23.72.78/css/fog.css" />
<link rel="stylesheet" href="http://64.23.72.78/css/smoothness/jquery-ui-1.9.0.custom.min.css" />
<!-- JavaScript Libraries -->
<script type="text/javascript" src="http://64.23.72.78/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://64.23.72.78/js/jquery.svg.min.js"></script>
<script type="text/javascript" src="http://64.23.72.78/js/jquery.svgdom.js"></script>
<script type="text/javascript" src="http://64.23.72.78/js/jquery-ui-1.9.0.custom.min.js"></script>
<!--<script type="text/javascript" src="http://64.23.72.68/js/grabNdrag.js"></script>-->
<!-- Socket.io -->
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>

<body>
<div id="fullgridBack"></div>
<div id="fullgrid"></div>
<!--<canvas id="onSVG" style="position:absolute"></canvas>-->
<!--<div id="fullgridFront"></div>-->
<div id="hexOutLine">
</div>

<div id="onWrite" class="writeit" style="word-wrap:break-word;word-break:break-all;">
  <table id="onWriteTable" cellpadding="0" cellspacing="0">
    <tr height="15"></tr>
    <tr>
      <td width="20%"></td>
      <td width="60" id="onWriteTd">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td id="keywordTd"><strong id="keyword">&nbsp;About : &nbsp;</strong> <textarea id="keywordW" rows="1"></textarea></td>
          </tr>
          <tr>
            <td><textarea id="content"name="content" rows="6" autofocus></textarea></td>
          </tr>
        </table>
      </td>
      <td width="20%"></td>
    </tr>
   </table>
</div>
<div id="CounterNButton">
  <!--<input id="counter" value="100" disabled />-->
  <input id="button" type="button" value="-IN'" />
</div>
<div id="CounterNButton2">
  <!--<input id="counter" value="100" disabled />-->
  <input id="button2" type="button" value="Plus!" />
</div>

<div id="onMessage">
  <div id="hexOn"></div>
  <div id="onOn" style="word-wrap:break-word;word-break:break-all; text-align:justify">
    <table id="onOnTable" border="0">
      <tr height="28%">
        <td width="5%">&nbsp;</td>
        <td width="90%">
          <table width="100%" height="100%">
            <tr height="85%"></tr>
            <tr height="15%"></tr>
              <td width="10%"></td>
              <td width="40%" id="onOnUID"></td>
              <td width="40%" id="onOnWT"></td>
              <td width="10%"></td>
            </tr>
          </table>
        </td>
        <td width="5%">&nbsp;</td>
      </tr>
      <tr height="44%">
        <td></td>
        <td id="onOnTd"></td>
        <td>&nbsp;</td>
      </tr>
      <tr height="28%">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </div>
</div>
<!--<div id="writeMessage">-->
  <!--<div id="hexWrite"></div>-->

<!--</div>-->
<div id="colorpad">
	<table id="colorpadTable" width="128" border="2">
  <tr>
    <td class="colorOne" bgcolor="#00008C"></td>
    <td class="colorOne" bgcolor="#008C8C"></td>
    <td class="colorOne" bgcolor="#CD1039"></td>
  </tr>
  <tr>
    <td class="colorOne" bgcolor="#942894"></td>
    <td class="colorOne" bgcolor="#FF9100"></td>
    <td class="colorOne" bgcolor="#323C73"></td>
  </tr>
  <tr>
    <td class="colorOne" bgcolor="#AE5E1A"></td>
    <td class="colorOne" bgcolor="#C71585"></td>
    <td class="colorOne" bgcolor="#006400"></td>
  </tr>
</table>
</div>
<div id="loading">
  <img src="http://64.23.72.68/img/loading.gif" />
</div>
<div id="temp">

</div>

<!-- Grid Creation & Scroll Movement & Registration Event Handler & AJAJ by JavaScript & jQuery -->
<script type="text/javascript">
	
	// Global Variables Declaration
	var socket = io.connect();
	/*
	var fx = 249+(Math.floor(Math.random()*500))*2;
	var fy = 99+(Math.floor(Math.random()*150))*2;
	*/
	var fx = 600;
	var fy = 200;
	//var z = document.body.clientWidth/500;
	var z = 2.6;
	var sendid;
	var sendclass;
	var sendfill;
	var textonOn;
	var sendid1;
	var sendid2;
	var sendid3;
	var sendid4;
	var sendid5;
	var sendid6;
	var sendkey_id;
	var sendContent;
	var data_x;
	var data_y;
	var sendcolor;
	var npi= Math.PI/3;
	var rad1;
	var rad2;
	var rad3;
	var targetKey_idClass;
	var thisKeyword;
	var sendgrid = [];
	var fxs;
	var fys;
	var fxe;
	var fye;
	//var showIt;
	//var hideIt;
	//var canvas = $("#onSVG");
	//var context = canvas.get(0).getContext("2d");
	
	function unload()	{
		socket.emit('reserveC', {
		id : sendid
		});
	}
	$(window).unload(function(){
   		
		unload();
 	});
	$('#fullgridBack').svg({onLoad: drawFullgridBack});
	function drawFullgridBack(svg){
		svg.configure({ width : 16509*z, height : 9587*z }, true);		
	}
	$('#fullgrid').svg({onLoad: drawFog});
	function drawFog(svg) { 
		svg.configure({ width : 16509*z, height : 9587*z, id : 'fullgridSvg' }, true);
		for (var i, j = fy - 24; j < fy + 24; j+=2) {
			for (i = fx - 64; i < fx + 64; i+=2) { 
				svg.polygon([[((10*i - 0.34)*z), (((190.6/11)*j - 16.16)*z)], 
							 [((10*i + 8.32)*z), (((190.6/11)*j - 11.16)*z)], 
							 [((10*i + 8.32)*z), (((190.6/11)*j - 1.16)*z)], 
							 [((10*i - 0.34)*z), (((190.6/11)*j + 3.84)*z)], 
							 [((10*i - 9)*z), (((190.6/11)*j - 1.16)*z)], 
							 [((10*i - 9)*z), (((190.6/11)*j - 11.16)*z)]], 
							{id : 'g' + i + 'x' + j + 'y', fillOpacity : 0, stroke : 'white', class : 'poly empty', strokeWidth : .6*z, strokeOpacity : 0, data_x : i, data_y :j, 'stroke-dasharray' :'6,2,2,2'});
				svg.polygon([[((10*(i+1) - 0.34)*z), (((190.6/11)*(j+1) - 16.16)*z)], 
							 [((10*(i+1) + 8.32)*z), (((190.6/11)*(j+1) - 11.16)*z)], 
							 [((10*(i+1) + 8.32)*z), (((190.6/11)*(j+1) - 1.16)*z)], 
							 [((10*(i+1) - 0.34)*z), (((190.6/11)*(j+1) + 3.84)*z)], 
							 [((10*(i+1) - 9)*z), (((190.6/11)*(j+1) - 1.16)*z)], 
							 [((10*(i+1) - 9)*z), (((190.6/11)*(j+1) - 11.16)*z)]], 
							{id : 'g' + (i+1) + 'x' + (j+1) + 'y', fillOpacity : 0, stroke : 'white', class : 'poly empty', strokeWidth : .6*z, strokeOpacity : 0, data_x : i+1, data_y : j+1,'stroke-dasharray' :'6,2,2,2'});				
			}
		}
	}	
	//$("#onSVG").css({width : 16509*z, height : 9587*z});
	var svg = $('#fullgrid').svg('get');
	var svgB = $('#fullgridBack').svg('get');
	
	//context.fillRect(19500, 11262.7, 50, 50);
	
	// Define of Click Event class 'empty' 
	var emptyClickHandler = function() {
		hideWrite();
		socket.emit('reserveC', {
			id : sendid
		});
		sendid = this.id;
		socket.emit('reserve', {
			id : sendid
		});
		$("#sendcolor").css('background-color', 'gray');
		sendcolor = 'gray';
		sendkey_id = null;
		data_x = Number($(this).attr('data_x'));
		data_y = Number($(this).attr('data_y'));
		//sendclass = 'empty';
		sendid1 = 'g' + (data_x - 1) + 'x' + (data_y - 1) + 'y';
		sendid2 = 'g' + (data_x - 2) + 'x' + (data_y) + 'y';
		sendid3 = 'g' + (data_x - 1) + 'x' + (data_y + 1) + 'y';
		sendid4 = 'g' + (data_x + 1) + 'x' + (data_y + 1) + 'y';
		sendid5 = 'g' + (data_x + 2) + 'x' + (data_y) + 'y';
		sendid6 = 'g' + (data_x + 1) + 'x' + (data_y - 1) + 'y';
		showColorPad();
		showHexOutLine();
		$("#content").val('');
		$("#keywordW").val('');
    };
	var relaemptyClickHandler = function () {
		hideWrite();
		socket.emit('reserveC', {
			id : sendid
		});
		sendid = this.id;
		socket.emit('reserve', {
			id: sendid
		});
		data_x = Number($(this).attr('data_x'));
		data_y = Number($(this).attr('data_y'));
		sendkey_id = $(this).attr('key_id');
		//sendclass = 'relaempty';
		sendcolor = $(this).attr('stroke');
		thisKeyword = $(this).attr('keyword');
		$("#sendcolor").css('background-color', sendcolor);
		$("#keywordW").val(thisKeyword);
		sendid1 = 'g' + (data_x - 1) + 'x' + (data_y - 1) + 'y';
		sendid2 = 'g' + (data_x - 2) + 'x' + (data_y) + 'y';
		sendid3 = 'g' + (data_x - 1) + 'x' + (data_y + 1) + 'y';
		sendid4 = 'g' + (data_x + 1) + 'x' + (data_y + 1) + 'y';
		sendid5 = 'g' + (data_x + 2) + 'x' + (data_y) + 'y';
		sendid6 = 'g' + (data_x + 1) + 'x' + (data_y - 1) + 'y';
		showHexOutLine();
		$("#colorpad").fadeOut(100);
		showWriteHex();
		showWriteMessN();
		$("#keywordW").attr('disabled', true);
		setTimeout(function() { $("#content").focus(); }, 300);	}
	$(".empty").click(emptyClickHandler);
	$("#onOn").css({width : 72.28*z, height : 82.3094*z});
	$("#onMessage").css({width : 72.28*z, height : 82.3094*z});
	$("#onOnTable").css({width : 72.28*z, height : 82.3094*z});
	$("#onWrite").css({width : 72.28*z, height : 41.1547*z});
	$("#onWriteTable").css({width : 72.28*z, height : 41.1547*z});
	$("#hexOn").svg({onLoad: drawHexOn});
	function drawHexOn(svg) {
		svg.configure({ width : 72.28*z, height : 82.3094*z }, true);
		svg.polygon([[((36.14)*z), ((1.1547)*z)], 
							 [((71.28)*z), ((21.1547)*z)], 
							 [((71.28)*z), ((61.1547)*z)], 
							 [((36.14)*z), ((81.1547)*z)], 
							 [((1)*z), ((61.1547)*z)], 
							 [((1)*z), ((21.1547)*z)]], 
							{id : 'bigHexO', fill : 'white', stroke : 'gray', strokeWidth : 1*z});
	}
		
	$("#hexOutLine").svg({onLoad: drawHexOutLine});
	function drawHexOutLine(svg) {
		i = 1, j = 1 ;
		svg.configure({ width : (((10*i + 8.32)+0.6)*z), height : ((((190.6/11)*j + 3.84)+0.6)*z) }, true);
		svg.polygon([[((10*i - 0.34)*z), (((190.6/11)*j - 16.16)*z)], 
							 [((10*i + 8.32)*z), (((190.6/11)*j - 11.16)*z)], 
							 [((10*i + 8.32)*z), (((190.6/11)*j - 1.16)*z)], 
							 [((10*i - 0.34)*z), (((190.6/11)*j + 3.84)*z)], 
							 [((10*i - 9)*z), (((190.6/11)*j - 1.16)*z)], 
							 [((10*i - 9)*z), (((190.6/11)*j - 11.16)*z)]], 
							{id : 'selHex', fillOpacity : 0, stroke : '#373737', strokeOpacity : 0.37, strokeWidth : 1.2*z});
	}
	function showMessN() {
		$("#onMessage").fadeIn(100);
		$(targetKey_idClass).animate({'stroke-opacity': 1}, 80);
		$(targetid2).animate({'stroke-opacity': 1, 'stroke-width': 3*z}, 30);
	}
	function hideMessN() {
		$("#onMessage").fadeOut(100);
		$(targetKey_idClass).animate({'stroke-opacity': 0}, 100);
		$(targetid2).animate({'stroke-width': 3*z}, 50);
	}
	function showColorPad() {
		$("#colorpad").fadeOut(100);
		$("#colorpad").animate({left : ((data_x-1)*10*z-37), top : ((data_y-1)*(190.6/11)*z-150)}, 100);
		$("#colorpad").fadeIn(100);		
	}
	function showWriteHex() {
		svg.polygon([[((((data_x-1)*10)+(9.16))*z), ((((data_y-1)*(190.6/11))-(80))*z)], 
							 [((((data_x-1)*10)+(44.20))*z), ((((data_y-1)*(190.6/11))-(60))*z)], 
							 [((((data_x-1)*10)+(44.20))*z), ((((data_y-1)*(190.6/11))-(20))*z)], 
							 [((((data_x-1)*10)+(9.16))*z), ((((data_y-1)*(190.6/11))-(0))*z)], 
							 [((((data_x-1)*10)-(24.98))*z), ((((data_y-1)*(190.6/11))-(20))*z)], 
							 [((((data_x-1)*10)-(24.98))*z), ((((data_y-1)*(190.6/11))-(60))*z)]], 
							{id : 'bigHexW', fill : 'white', fillOpacity : 0, strokeOpacity : 0, stroke : sendcolor, strokeWidth : 1*z, class: 'send'});
	}
	function hexOnPos(x,y){
			$("#onMessage").css({left: x-(36.14*z), top: y-(93.3094*z)});
	}
	
	function showWriteMessN() {		
		$(".send").animate({ 'fill-opacity' : 1, 'stroke-opacity' : 1}, 500);
		$("#content").empty();
		$("#keywordW").empty();
		$("#onWrite").animate({left: (data_x)*10*z-(36.14*z), top: (data_y)*(190.6/11)*z-(82.3094*z)},100);
		$("#CounterNButton").animate({left: (data_x)*10*z-23, top: (data_y)*(190.6/11)*z-100},100);
		$("#CounterNButton").fadeIn(300);
		$("#onWrite").fadeIn(300);
	}
	function showWriteMess() {		
		$(".send").animate({ 'fill-opacity' : 1, 'stroke-opacity' : 1}, 500);
		$("#content").empty();
		$("#keywordW").empty();
		$("#onWrite").animate({left: (data_x)*10*z-(36.14*z), top: (data_y)*(190.6/11)*z-(82.3094*z)},100);
		$("#CounterNButton2").animate({left: (data_x)*10*z-30, top: (data_y)*(190.6/11)*z-110},100);
		$("#CounterNButton2").fadeIn(300);
		$("#onWrite").fadeIn(300);
	}
	function hideWrite() {
		$(".send").remove();
		$("#CounterNButton").hide();
		$("#CounterNButton2").hide();
		$("#onWrite").hide();
		/*if (this.class != 'filled' && sendid != null) {
			socket.emit('reserveC', {
				id : sendid
			});
		}*/
	}
	function writeTimeCal() {
		pastTime = nowTime - itTime
		if ( pastTime < (1000*60) ) {
			return Math.floor((nowTime - itTime)/(1000)) + 's';
		}
		else if ( pastTime < (1000*60*60) ) {
			return Math.floor((nowTime - itTime)/(1000*60)) + 'm';
		}
		else if ( pastTime < (1000*60*60*24) ) {
			return Math.floor((nowTime - itTime)/(1000*60*60)) + 'h';
		}
		else {
			return Math.floor((nowTime - itTime)/(1000*60*60*24)) + 'd';
		}		
	}
	function keywordSearch() {
		
	}
	function makeFilled(data) {
			var targetid = '#' + data._id;
			var targetid2 = '#2' + data._id;
			var targetidTri = '.' + data._id;
			//targetidClass = '.' + data._id
			$(targetid).unbind();
			$(targetid).attr({
				class : 'poly filled',		
				fill : data.prop.color,
				keyword : data.prop.keyword,
				content : data.prop.content,
				key_id : data.prop.key_id,
				writime : data.prop.writime
			}).css('fill-opacity', 0).animate({'fill-opacity': 0.8}, 500).animate({'stroke-width': 0, 'stroke-opacity': 0}, 1000);
					
			svgB.polygon([[((10*(data.gridx) - 0.34)*z), (((190.6/11)*(data.gridy) - 17.51)*z)], 
							 [((10*(data.gridx) + 9.49)*z), (((190.6/11)*(data.gridy) - 11.835)*z)], 
							 [((10*(data.gridx) + 9.49)*z), (((190.6/11)*(data.gridy) - 0.495)*z)], 
							 [((10*(data.gridx) - 0.34)*z), (((190.6/11)*(data.gridy) + 5.19)*z)], 
							 [((10*(data.gridx) - 10.17)*z), (((190.6/11)*(data.gridy) - 0.495)*z)], 
							 [((10*(data.gridx) - 10.17)*z), (((190.6/11)*(data.gridy) - 11.835)*z)]], 
							{id : '2' + data._id, class : 'poly gridback', fill : 'none', stroke : 'white', class : data.key_id, strokeWidth : 3*z, strokeOpacity :0});
			
			for (var i=1; i < 7; i++) {
				if (data.relaArrays.relaIn[i] == 1) {
						rad1 = npi*(5-j);
						rad2 = npi*(4.75-j);
						rad3 = npi*(5.25-j);
						svg.polygon([[(((8.7*Math.cos(rad1))+9.66+((data.gridx-1)*10))*z), (((8.7*Math.sin(rad1))-6.16+((data.gridy)*(190.6/11)))*z)],
				[(((11.5*Math.cos(rad2))+9.66+((data.gridx-1)*10))*z), (((11.5*Math.sin(rad2))-6.16+((data.gridy)*(190.6/11)))*z)],
				[(((11.5*Math.cos(rad3))+9.66+((data.gridx-1)*10))*z), (((11.5*Math.sin(rad3))-6.16+((data.gridy)*(190.6/11)))*z)]],
								{ class : 'poly tri'+' '+data._id, fillOpacity : 0, fill : data.color});
				}
			}
			$(targetid2).animate({'stroke-opacity': .2}, 500);
			$(targetidTri).animate({'fill-opacity':0.5}, 1000);
			
			$(targetid).hover (function(event){
				$("#onMessage").fadeIn(100);
				var targetid2 = '#2' + this.id;
				//hideMessN().stop();
				//hideIt.stop();
				$(targetid2).stop();
				hexOnPos(event.pageX, event.pageY);				
				targetKey_idClass = '.' + $(this).attr('key_id');
				//showMessN();
				//$(targetKey_idClass).animate({'stroke-opacity': 1}, 80);
				$(targetid2).animate({'stroke-opacity': 1}, 30);
				textonOn = $(this).attr('content');
				nowTime = Number(new Date());
				itTime = $(this).attr('writime');
				$('#onOnWT').append(writeTimeCal());
				$('#onOnTd').append(textonOn);
				bHstrColor = $(this).attr('fill');
				$("#bigHexO").attr('stroke', bHstrColor);					
			}, function(){	
				$("#onMessage").stop();
				//showIt.stop();			
				//showMessN().stop();		
				$("#onMessage").fadeOut(100);
				$('#onOnTd').empty();
				$("#onOnWT").empty();
				
				//hideMessN();				
				//$(targetKey_idClass).animate({'stroke-opacity':.4}, 100);
				$(targetid2).animate({'stroke-opacity': .2}, 50);
				
			});
			$(targetid).mousemove(function(event){
				hexOnPos(event.pageX, event.pageY);
			});
			$(targetid).click ( function () {
				hideWrite();
				socket.emit('reserveC', {
					id : sendid
				});
				$("#onMessage").fadeOut(100);
				sendid = this.id;
				data_x = Number($(this).attr('data_x'));
				data_y = Number($(this).attr('data_y'));
				sendkey_id = $(this).attr('key_id');
				sendcolor = $(this).attr('stroke');
				thisKeyword = $(this).attr('keyword');
				$("#keywordW").val(thisKeyword);
				$("#colorpad").fadeOut(100);
				showHexOutLine();
				showWriteHex();
				showWriteMess();
				$("#keywordW").attr('disabled', true);
			});			
	}
	function makeRelaempty (data) {
		var targetid = '#' + data._id
		$(targetid).attr({ 
			class : 'poly relaempty',
			stroke : data.prop.color,
			keyword : data.prop.keyword,
			key_id : data.prop.key_id,
			'stroke-opacity' : 0
 		});				
		$(targetid).animate({'stroke-opacity' : 0.8}, 1000); 
		$(targetid).unbind();
		//Set Click Events of 'Relaempty'
		$(targetid).click (relaemptyClickHandler);
	}
	function makeReserved (data) {
		var targetid = '#' + data._id
		if (data.prop.color == null) {
			$(targetid).attr({
				'class' : 'poly empty',
				'stroke' : 'white'
			});
		}
		else {
			$(targetid).attr({
				class : 'poly relaempty',
				stroke : data.prop.color,				
				keyword : data.prop.keyword,
				key_id : data.prop.key_id	
			});
		}
		$(targetid).attr('fill', 'gray')
		.animate({'fill-opacity':0.8}, 300)
		.unbind('click').hover(function(event){
			$("#onMessage").fadeIn(100);
			hexOnPos(event.pageX, event.pageY);
			textonOn = 'This is reserved!'
			$('#onOnTd').append(textonOn);
			$("#bigHexO").attr('stroke', 'gray');					
		}, function(){	
			$("#onMessage").fadeOut(100);
			$('#onOnTd').empty();
		})
		.mousemove(function(event){
			hexOnPos(event.pageX, event.pageY);
		});			
	}
		
	var tempCenterX = 10*fx;
	var tempCenterY = (190.6/11)*fy;
	var tempScrollX = tempCenterX*z - (document.body.clientWidth/2);
	var tempScrollY = tempCenterY*z - (document.body.clientHeight/2);
	window.scrollTo(tempScrollX, tempScrollY) ;
	function messageInput() {
		hideWrite();
		socket.emit('regist', {
			id : sendid,
			id1 : sendid1,
			id2 : sendid2,
			id3 : sendid3,
			id4 : sendid4,
			id5 : sendid5,
			id6 : sendid6,
			fill :sendcolor,
			//class : sendclass,
			key_id : sendkey_id,
			keyword : $('#keywordW').val(),
			message : $('#content').val()	
		});
		$('#content').val('');
		$("#keywordW").val('');
		//$('#tempmess').focus();
		$("#hexOutLine").fadeOut(100);
		//setTimeout(function() { $("#bigHexW").remove(); },500);		
	}
	function messageInput2() {
		socket.emit('registR', {
			id : sendid,
			message : $('#content').val()
		});
		$('#content').val('');
		$("#keywordW").val('');
		//$('#tempmess').focus();
		$("#hexOutLine").fadeOut(100);
		hideWrite();
		//setTimeout(function() { $("#bigHexW").remove(); },500);		
	}
	function showHexOutLine() {
		$("#hexOutLine").fadeOut(100);
		//$("#hexOutLine").css({left : ((data_x-1)*10*z), top : ((data_y-1)*(190.6/11)*z)});
		$("#hexOutLine").animate({left : ((data_x-1)*10*z), top : ((data_y-1)*(190.6/11)*z)},100);
		$("#hexOutLine").fadeIn(150);
	}
	$("#hexOutLine").click(function() {
        $(this).fadeOut(100);
		$("#colorpad").fadeOut(100);
		hideWrite();
		socket.emit('reserveC', {
			id : sendid
		});
    });
	$("#fullgridBack").click(function() {
		$("#hexOutLine").fadeOut(100);
		$("#colorpad").fadeOut(100);
		hideWrite();
	});
	$(document).ready(function() {
		socket.emit('ajaj', {
			cfx : fx,
			cfy : fy
		});
		socket.on('ajaj', function (data) {
			console.log(data)
			$(".empty").css('stroke-opacity', .8);
			$(".remove").remove();
			for (var i = 0, len = data.length; i < len; i++) {
				if (data[i].prop.class == 'filled') {
					makeFilled(data[i]);					
				}
				else if (data[i].prop.class == 'relaempty') {
					makeRelaempty(data[i]);
				}
				else if (data[i].prop.class == 'reserved') {
					makeReserved(data[i]);
				}
				
			}
		});
		socket.on('registpush', function (data) {
			console.log(data);
			makeFilled(data);
		});
		socket.on('registpushN', function (data) {
			console.log(data);
			makeRelaempty(data);
		});
		socket.on('reserve', function (data) {
			console.log(data);
			var targetid = '#' + data._id
			$(targetid).attr('fill', 'gray').animate({'fill-opacity':0.8}, 300)
			.unbind('click').hover(function(event){
				$("#onMessage").fadeIn(100);
				hexOnPos(event.pageX, event.pageY);
				textonOn = 'This is reserved!'
				$('#onOnTd').append(textonOn);
				$("#bigHexO").attr('stroke', 'gray');					
			}, function(){	
				$("#onMessage").fadeOut(100);
				$('#onOnTd').empty();
			}).mousemove(function(event){
				hexOnPos(event.pageX, event.pageY);
			});			
		});
		socket.on('reserveC', function (data) {
			console.log(data)
			var targetid = '#' + data._id
			$(targetid).attr('fill', null).animate({'fill-opacity':0}, 300).unbind('hover');
			if (data.prop == null) {
				$(targetid).click(emptyClickHandler);
			}
			else {
				$(targetid).click(relaemptyClickHandler);
			}			
		});
		socket.on('nearFull', function (data) {
			alert('Near Grids are fulled!');
		});
		socket.on('timepoint', function (data) {
			console.log(data)
			var targetid = '#' + data.grid_id
			$(targetid).animate({'fill-opacity': (data.level)/5}, 500);
		});
		socket.on('removepush', function(data) {
			console.log(data);
			var targetid = '#' + data
			var targetid2 = '#2' + data
			$(targetid).unbind();
			$(targetid).attr({ 
				class : 'empty',
				stroke : 'white',
				fill : null,
				'stroke-opacity' : 0
			});
			$(targetid).animate({'fill-opacity':0, 'stroke-width': .6*z, 'stroke-opacity':0.8}, 500);
			$(targetid).click (emptyClickHandler);
			$(targetid2).remove();
			$("#onMessage").fadeOut(100);
		});
		socket.on('removepushN', function(data) {
				console.log(data);
				var targetid = '#' + data._id
				var targetid2 = '#2' + data._id
				$(targetid).unbind();
				$(targetid).attr({ 
					class : 'relaempty',
					stroke : data.prop.color,
					keyword : data.prop.keyword,
					key_id : data.prop.key_id,
					fill : null,
					'stroke-opacity' : 0
				});
				$(targetid).animate({'stroke-opacity' : 0.8, 'fill-opacity': 0, 'stroke-width':.6*z}, 500); 
				$(targetid).unbind();
				$(targetid).click (relaemptyClickHandler);
				$(targetid2).remove();
		});
		$('#loading').hide();
		$('.colorOne').click(function() {
			sendcolor = $(this).attr('bgcolor');
			$("#colorpad").fadeOut(100);
			showWriteHex();
			showWriteMessN();
			setTimeout(function () { $("#keywordW").attr('disabled', false) }, 300);
			setTimeout(function() { $("#keywordW").focus(); }, 300);
        });
		$("#button").bind('click', messageInput);
		$("#button2").bind('click', messageInput2);
	});
	$(window).scroll(function() {
		var realScrollX = document.body.scrollLeft + document.body.clientWidth/2;
		var realScrollY = document.body.scrollTop + document.body.clientHeight/2;
		var realCenterX = realScrollX/z;
		var realCenterY = realScrollY/z;
		if ((Math.abs(realCenterX - tempCenterX) > document.body.clientWidth*.25) || (Math.abs(realCenterY - tempCenterY) > document.body.clientHeight*.25)) {
			$(".poly").toggleClass('remove');
			$('#loading').fadeIn(500);
			var nx = Math.floor(realCenterX/(20))*2 + 1;
			var ny = Math.floor(realCenterY/(361.2/11))*2 + 1;
			//setTimeout( function() {
				for (var i, j = ny - 24; j < ny + 24; j+=2) {
					for (i = nx - 64; i < nx + 64; i+=2) { 
						svg.polygon([[((10*i - 0.34)*z), (((190.6/11)*j - 16.16)*z)], 
								 [((10*i + 8.32)*z), (((190.6/11)*j - 11.16)*z)], 
								 [((10*i + 8.32)*z), (((190.6/11)*j - 1.16)*z)], 
								 [((10*i - 0.34)*z), (((190.6/11)*j + 3.84)*z)], 
								 [((10*i - 9)*z), (((190.6/11)*j - 1.16)*z)], 
								 [((10*i - 9)*z), (((190.6/11)*j - 11.16)*z)]], 
								{id : 'g' + i + 'x' + j + 'y', fillOpacity : 0, stroke : 'white', class : 'poly empty', strokeWidth : .6*z, strokeOpacity : 0, data_x : i, data_y :j, 'stroke-dasharray' :'6,2,2,2'});
					svg.polygon([[((10*(i+1) - 0.34)*z), (((190.6/11)*(j+1) - 16.16)*z)], 
								 [((10*(i+1) + 8.32)*z), (((190.6/11)*(j+1) - 11.16)*z)], 
								 [((10*(i+1) + 8.32)*z), (((190.6/11)*(j+1) - 1.16)*z)], 
								 [((10*(i+1) - 0.34)*z), (((190.6/11)*(j+1) + 3.84)*z)], 
								 [((10*(i+1) - 9)*z), (((190.6/11)*(j+1) - 1.16)*z)], 
								 [((10*(i+1) - 9)*z), (((190.6/11)*(j+1) - 11.16)*z)]], 
								{id : 'g' + (i+1) + 'x' + (j+1) + 'y', fillOpacity : 0, stroke : 'white', class : 'poly empty', strokeWidth : .6*z, strokeOpacity : 0, data_x : i+1, data_y : j+1,'stroke-dasharray' :'6,2,2,2'});	
					}
				}
			//}, 150);
			//setTimeout( function() {
				$(".empty").click (emptyClickHandler);
			//}, 150);
			//setTimeout( function() {
				socket.emit('ajaj', {
					cfx : nx,
					cfy : ny
				});
			//}, 300);
			
			//setTimeout( function() {$(".remove").remove();}, 2000);
		$('#loading').hide();
			tempCenterX = realCenterX;
			tempCenterY = realCenterY;
			fx = nx;
			fy = ny;
		}
	});
</script>




</body>
</html>